import React, { forwardRef } from 'react';
// import PropTypes from 'prop-types';
import moment from 'moment';
import { DatePicker, Radio, Col, Row } from 'antd';
import TimePickers from '../Time';
import styles from './index.less';

export const Time = {
    zh: {
        am: {
            startTime: '09:00',
            endTime: '14:00',
            returnToWork: '09:00'
        },
        pm: {
            startTime: '14:00',
            endTime: '18:00'
        }
    },
    sg: {
        am: {
            startTime: '09:00',
            endTime: '14:00',
            returnToWork: '09:00'
        },
        pm: {
            startTime: '14:00',
            endTime: '18:00'
        }
    }
};
export const getTime = ({ date, dayType, type, country, unit }) => {
    if (!date) return null;
    const tempdayType = dayType || (type === 'startTime' || type === 'returnToWork' ? 'am' : 'pm');
    if (unit === 1) {
        return moment(date.format(`YYYY-MM-DD ${Time[country][tempdayType][type]}:00`));
    }
    if (unit === 2) {
        return moment(date.format(`YYYY-MM-DD ${Time[country][tempdayType][type]}:00`));
    }
    if (!unit) {
        return moment(date.format('YYYY-MM-DD'));
    }
    return moment(date.format('YYYY-MM-DD HH:mm:00'));
};

const LeaveDatePicker = forwardRef(
    (
        {
            amTime,
            pmTime,
            value = {
                time: null, // 值
                timeValue: '', // 时间
                unit: '', // 单位
                country: '', // 国家,
                disabled: true, // 禁用
                dayType: '', // 上下午：am/pm
                type: '' // 开始时间或结束时间
            },
            onChange,
            timeSpread = false, // 时间是否单独分开
            ...rest
        },
        ref
    ) => {
        const { time, timeValue, dayType, unit, country, disabled, type } = value;

        const getFormat = () => {
            if (unit === 3) {
                return 'YYYY-MM-DD HH:mm';
            }
            if (unit === 2) {
                // if (country === 'zh') {
                //     return 'YYYY-MM-DD HH:mm';
                // }
                return 'YYYY-MM-DD';
            }
            return 'YYYY-MM-DD';
        };
        const getShowTime = () => (unit === 3 ? { format: 'HH:mm' } : false);
        if (timeSpread && unit === 3) {
            // const timeValue = value.time ? value.time.format('HH:mm') : '';
            return (
                <Row type="flex" gutter={8}>
                    <Col className={styles.flex}>
                        <DatePicker
                            value={time}
                            onChange={date => {
                                onChange({
                                    ...value,
                                    time: date
                                });
                            }}
                            allowClear={false}
                            {...rest}
                            showTime={false}
                            format="YYYY-MM-DD"
                            disabled={disabled}
                            ref={ref}
                        />
                    </Col>
                    <Col>
                        <TimePickers
                            disabled={disabled}
                            value={timeValue}
                            onBlur={val => {
                                const formattedVal = moment(val, 'HH:mm');
                                if (formattedVal.isValid()) {
                                    onChange({
                                        ...value,
                                        timeValue: formattedVal.format('HH:mm')
                                    });
                                } else {
                                    onChange({
                                        ...value,
                                        timeValue: '00:00'
                                    });
                                }
                            }}
                            onChange={val => {
                                onChange({
                                    ...value,
                                    timeValue: val
                                });
                            }}
                        />
                    </Col>
                </Row>
            );
        }
        return (
            <Row type="flex">
                <Col className={styles.flex}>
                    <DatePicker
                        value={time}
                        onChange={date => {
                            onChange({
                                ...value,
                                time: getTime({
                                    date,
                                    dayType,
                                    type,
                                    country,
                                    unit
                                })
                            });
                        }}
                        allowClear={false}
                        {...rest}
                        format={getFormat()}
                        showTime={getShowTime()}
                        disabled={disabled}
                        ref={ref}
                    />
                </Col>
                {unit === 2 && (
                    <Col>
                        <Radio.Group
                            value={dayType}
                            disabled={disabled}
                            className={styles.radioGroup}
                            onChange={e => {
                                if (e.target.value === 'am') {
                                    console.log(value);
                                    onChange({
                                        ...value,
                                        time: getTime({
                                            date: time,
                                            dayType: 'am',
                                            unit,
                                            country,
                                            type
                                        }),
                                        dayType: e.target.value
                                    });
                                } else if (e.target.value === 'pm') {
                                    onChange({
                                        ...value,
                                        time: getTime({
                                            date: time,
                                            dayType: 'pm',
                                            unit,
                                            country,
                                            type
                                        }),
                                        dayType: e.target.value
                                    });
                                }
                            }}
                        >
                            <Radio.Button value="am">上午</Radio.Button>
                            <Radio.Button value="pm">下午</Radio.Button>
                        </Radio.Group>
                    </Col>
                )}
            </Row>
        );
    }
);

LeaveDatePicker.propTypes = {
    // /**
    //  * 上午选中的时间
    //  */
    // amTime: PropTypes.string,
    // /**
    //  * 下午选中的时间
    //  */
    // pmTime: PropTypes.string,
    // type: PropTypes.oneOf(['zh', 'sg'])
};

LeaveDatePicker.defaultProps = {
    // amTime: '09:00',
    // pmTime: '14:00',
    // type: 'zh'
};

export default LeaveDatePicker;
